<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="salechart" style="width: 800px;height:600px;"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('salechart'));


    $(document).ready(function() {

        $.ajax({

            url: "http://localhost:8080/dreamgame/game/echart",

            async: true,

            dataType: "json",

            type: "get",

            success: (r) => {

                console.log(r.data.typeNames);

                // 指定图表的配置项和数据
                myChart.setOption({
                    title: {
                        text: '游戏销量图',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} '
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '游戏销量',
                            type: 'pie',
                            radius: '50%',
                            data: r.data.gameValues,

                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
                // 使用刚指定的配置项和数据显示图表。
            }
        })



    })

</script>
</body>
</html>